<ng-container *ngTemplateOutlet="headRight"></ng-container>
<ng-template #headRight>
  <div id="tools" class="bst-header-wrap">
    <!--      <span *appScreenLessHidden="'375'" (click)="lockScreen()" class="bst-header-icon" nz-tooltip nzTooltipTitle="锁屏"
            nzTooltipPlacement="bottom">
         <i nz-icon nzType="lock"
            nzTheme="outline"></i>
        </span>-->

    <!--注释的是一个弹出外连接的按钮-->
    <!-- <span *appScreenLessHidden="'375'" class="bst-header-icon" nz-tooltip nzTooltipTitle="OnChat的帮助文档"
           nzTooltipPlacement="bottom">
             <a href="https://docs.chat.hypergo.net/docs/intro/" target="_blank"><i nz-icon nzType="question-circle"
                                                                                    nzTheme="outline"></i></a>
           </span>-->
    <span
      *appScreenLessHidden="'393'"
      #toogleFullScreenDir="appToggleFullscreen"
      class="bst-header-icon"
      appToggleFullscreen
      nz-tooltip
      nzTooltipPlacement="bottom"
      [nzTooltipTitle]="toogleFullScreenDir.isFullscreenFlag ? '全屏' : '退出全屏'"
    >
      @if (toogleFullScreenDir.isFullscreenFlag) {
        <i nz-icon nzTheme="outline" nzType="fullscreen"></i>
      } @else {
        <i nz-icon nzTheme="outline" nzType="fullscreen-exit"></i>
      }
    </span>

    <span class="bst-header-icon" nz-dropdown [nzDropdownMenu]="userSettingMenu">
      <nz-avatar [nzSize]="26" nzIcon="user" style="margin-right: 10px" [nzSrc]="userAvatar"></nz-avatar>
      <span class="base-font-size">{{ userInfo.username }}</span>
    </span>
    <nz-dropdown-menu #userSettingMenu>
      <ul nz-menu>
        <li nz-menu-item (click)="changePassWorld()">
          <i class="m-r-8" nz-icon nzTheme="outline" nzType="lock"></i>
          <span>修改密码</span>
        </li>
        <li nz-menu-divider></li>
        <li nz-menu-item (click)="clean()">
          <i class="m-r-8" nz-icon nzTheme="outline" nzType="clear"></i>
          <span>清除缓存</span>
        </li>
        <li nz-menu-item (click)="lockScreen()">
          <i class="m-r-8" nz-icon nzTheme="outline" nzType="lock"></i>
          <span>锁定屏幕</span>
        </li>
        <li nz-menu-item>
          <div (click)="goLogin()">
            <i class="m-r-8" nz-icon nzTheme="outline" nzType="logout"></i>
            <span>退出登录</span>
          </div>
        </li>
      </ul>
    </nz-dropdown-menu>
  </div>
  <nz-dropdown-menu #noticeMenu="nzDropdownMenu">
    <app-home-notice></app-home-notice>
  </nz-dropdown-menu>
</ng-template>
